<template>
  <section class="article-boxes q-mb-md q-px-sm q-pt-md">
    <div v-if="title" class="row border-bottom-1 q-pb-sm items-center">
      <h2 class="size-24 title col text-shadow-white">{{ title }}</h2>
      <div class="size-14 text-grey-8">更多</div>
    </div>
    <q-list separator no-border>
      <q-item v-for="(article, index) in articles"
              :key="index" class="no-padding-x">
        <div>
          <h3 class="size-18 bold q-my-sm">{{ article.title }}</h3>
          <div class="row items-center q-my-sm">
            <a-head :user="article.user" :size="24" class="q-mr-xs"></a-head>
            <!--<span class="q-mr-sm size-14 text-grey-6">我是一个牛头人</span>-->
          </div>
          <div class="text-grey-10 text-content" :class="{'row': this.$q.screen.width > 800}">
            <div class="col-xl-3 col-lg-4 col-md-5 col-sm-12 col-xs-12" v-if="article.img"><img
              :src="'/statics/map/'+ (index + 1)  +'.jpg'" width="100%" class="border-radius-4"></div>
            <div class="col" :class="{'q-pl-md': this.$q.screen.width > 800}">{{ article.content }}</div>
          </div>
          <div class="size-14 text-grey-6 q-my-sm">
            <span class="q-mr-sm">{{ timesince(article.add_date) }}</span>
            <span class="q-mr-sm">{{ article.comment_number }}评论</span>
          </div>
        </div>
      </q-item>
    </q-list>
  </section>
</template>

<script>
  export default {
    name: 'aArticleBoxes',
    props: {
      articles: {
        type: Array,
        required: true
      },
      title: {
        type: String,
        required: true
      }
    },
    data () {
      return {}
    },
    computed: {
    }
  }
</script>

<style lang="stylus">
  @import "~quasar/dist/quasar.styl"
</style>
